<script setup>
import {ref} from "vue";
import {add_Category} from "@/api/category";

//导入 element-plus组件信息
import {ElMessage} from "element-plus";

const form = ref({
  name: '',
  description: ''
})
const addCategory = async () => {
  const res = await add_Category(form.value)

  //在拦截器里面  做一次筛选data数据
  if (res.code === 200) {
    ElMessage.success('分类添加成功')
    reset()
  }
}
const reset = () => {
  form.value={}
}


//添加表单的校验规则
const rules = {
  name: [
    {required: true, message: '分类名称不能为空', trigger: 'blur'},
    {min: 3, max: 20, message: '分类名称长度在3到20个字符', trigger: 'blur'}
  ],
  description: [
    {required: true, message: '分类描述不能为空', trigger: 'blur'},
    {min: 5, max: 100, message: '分类描述长度在5到100个字符', trigger: 'blur'}
  ]
};
</script>

<template>
  <el-form>
    <el-form-item label="分类名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="分类描述">
      <el-input v-model="form.description"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="addCategory" type="primary">添加分类</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>
